<template>
  <section>
    <el-popover placement="bottom-start"
                v-model="visible">
      <div>请输入检索内容</div>
      <div ref="searchPopover">
        <div class="cursor"
             @click="visible=false;searchClick(v.latLng)"
             v-for="(v,i) in searchResult"
             :key="i">
          <div>
            <span>{{i+1}}.</span>
            <span style="color:#0059B3;">{{v.name}}</span>
          </div>
          <div class="pdl-12">
            <div>
              <span class="f12">{{v.address}}</span>
            </div>
            <div>
              <span class="color999 f12">{{v.phone}}</span>
            </div>
          </div>
        </div>
      </div>
      <el-input slot="reference"
                @click="visible=searchVal?true:false"
                size="small"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="searchVal"></el-input>
    </el-popover>
    <!-- <div class="lh30">{{result?'您选择的地址是：'+result.address:'&nbsp;'}}</div> -->
    <div ref="MapMouthNode"
         style="width:100%;min-height:400px;"></div>
  </section>
</template>

<script>
import maps from 'qqmap'

export default {
  data () {
    return {
      map: null,
      markersArray: [],
      searchVal: '',
      visible: false,
      searchService: null,
      cityName: '',
      geocoder: null,
      searchResult: [],
      result: null
    }
  },
  props: {
    height: {
      type: String,
      default: '400px'
    },
  },
  watch: {
    searchVal (keyword) {
      this.searchService.search(keyword);
    },
    cityName (cityName) {
      this.searchService.setLocation(cityName);
    }
  },
  created () {
    console.log(navigator.geolocation);
    //判断是否支持 获取本地位置
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {

      });
    }
    else {
      this.$message.error('浏览器不支持定位.');
    }
    this.$nextTick(e => {
      this.init();
    })
  },
  methods: {
    init () {

      let _this = this;

      maps.init('UGQBZ-KRA6X-ZOD46-TEWRV-QDUHK-KCBJJ', () => {
        const myLatlng = new qq.maps.LatLng(0, 0);
        const myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeControl: false
        }
        console.log(myOptions);
        this.map = new qq.maps.Map(this.$refs.MapMouthNode, myOptions)
        console.log(1, this.map);
        //获取城市列表接口设置中心点
        const citylocation = new qq.maps.CityService({
          complete: function (result) {
            _this.cityName = result.detail.name
            _this.map.setCenter(result.detail.latLng);
            console.log(11111111, result);
            //生成地址检索
            _this.initSearch();
          }
        });
        console.log(32112321);
        //调用searchLocalCity();方法  根据用户IP查询城市信息。
        citylocation.searchLocalCity();
        const infoWin = new qq.maps.InfoWindow({
          map: this.map
        })
        console.log(infoWin);
        //点击地图事件
        this.listener = new qq.maps.event.addListener(this.map, 'click', function (event) {
          _this.addMarkers(event.latLng);
          // console.log(3213123, event);
        });
        this.geocoder = new qq.maps.Geocoder({
          complete: function (result) {
            // console.log(result);

            var d = result.detail.addressComponents
            _this.result = {
              address: d.province + d.city + d.district + d.street + d.town + d.streetNumber,
              detail: result.detail.addressComponents,
              location: result.detail.location
            }
            console.log(23423423, _this.result);

            _this.searchVal = _this.result.address
            _this.$emit('childFn', _this.result);
          }
        });
      })
    },
    initSearch () {
      // 设置Poi检索服务，用于本地检索、周边检索
      this.searchService = new qq.maps.SearchService({
        // 设置搜索范围为cityName
        location: this.cityName,
        // 设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
        // autoExtend: true,
        // 设置展现查询结构到infoDIV上
        //panel: this.$refs.searchPopover,
        // 检索成功的回调函数
        complete: r => {
          console.log(r)
          if (r.detail) {
            if (r.detail.totalNum > 0) {
              this.searchResult = r.detail.pois
            } else {
              this.searchResult = [];
            }
          } else {
            this.searchResult = [];
          }
        },
        // 若服务请求失败，则运行以下函数
        error: (e) => {
          this.searchResult = [];
          //this.$message.error(e);
        }
      })
    },
    searchClick (latLng) {
      this.addMarkers(latLng);
      this.geocoder = new qq.maps.Geocoder({
        complete: function (result) {
          // console.log(result);

          var d = result.detail.addressComponents
          _this.result = {
            address: d.province + d.city + d.district + d.street + d.town + d.streetNumber,
            detail: result.detail.addressComponents,
            location: result.detail.location
          }
          // console.log(111111, this.result);
          this.searchVal = this.result.address
          this.$emit('back', this.result);
        }
      });
    },
    addMarkers (latLng) {

      this.clearOverlays();
      this.map.setCenter(latLng);
      //创建标记
      var marker = new qq.maps.Marker({
        position: latLng,
        //draggable: true,
        map: this.map
      });
      this.markersArray.push(marker);
      this.geocoder.getAddress(latLng);
    },
    //清除覆盖层
    clearOverlays () {
      if (this.markersArray) {
        this.markersArray.forEach(e => {
          e.setMap(null);
        })
      }
    }
  }
}
</script>

<style scoped>
</style>
